<template>
    <div>
        <div class="container">
            <div class="e-p-b-30" style="font-size: 18px;">出库销售</div>
            <el-radio-group v-model="dataType" class="e-m-b-45">
                <el-radio-button label="0">数据中台</el-radio-button>
                <el-radio-button label="1">库存表</el-radio-button>
                <el-radio-button label="2">线上回收统计</el-radio-button>
                <el-radio-button label="3">门店回收统计</el-radio-button>
                <el-radio-button label="4">小哥入库统计</el-radio-button>
                <el-radio-button label="5">出库销售统计</el-radio-button>
            </el-radio-group>
            <div class="e-m-b-30">
                <el-radio-group v-model="way" class="e-m-t-20" size="mini" @change="getList">
                    <el-radio-button label="0">出库</el-radio-button>
                    <el-radio-button label="1">出售</el-radio-button>
                </el-radio-group>
            </div>
            <!-- <el-page-header @back="goBack" content="入库支出"></el-page-header> -->
            <!-- <div class="e-flex-1">
                <div class="admin-statistics-content">
                    <div class="item e-flex-1">
                        <label>客户送到站点收</label>
                        <div class="e-font-18">线下回收量</div>
                        <div class="e-m-t-10"><span>{{ fitorderssummary.weight }}</span></div>
                    </div>
                    <div class="item e-flex-1">
                        <label>客户送到站点收</label>
                        <div class="e-font-18">线下订单数</div>
                        <div class="e-m-t-10"><span>{{ fitorderssummary.ordercount }}</span></div>
                    </div>
                    <div class="item e-flex-1">
                        <label>客户送到站点收</label>
                        <div class="e-font-18">线下均单量</div>
                        <div class="e-m-t-10"><span>{{ fitorderssummary.averageweight }}</span></div>
                    </div>
                </div>
            </div> -->
            <!-- 更多筛选条件 -->
            <div class="other-search-form is-active">
                <el-form label-position="left" :inline="true" size="small">
                    <div class="flex align-items-center">
                        <!-- 时间筛选 -->
                        <timeChangeList v-model="timeType" @input="getList" @change="changeTime"></timeChangeList>
                    </div>
                    <div class="flex align-items-center">
                        <div class="e-flex-1" v-if="way == 0">
                            <el-form-item label="站点筛选">
                                <storeList v-model="storeId" :multiple="true" @change="selectStore"></storeList>
                            </el-form-item>
                        </div>
                        <div class="e-flex-1" v-if="way == 1">
                            <el-form-item label="所属加盟商">
                                <franchiseList v-model="franchiseId" @change="selectFranchise"></franchiseList>
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="e-p-b-20">
                <el-button @click="downloadwithdrawa()" type="primary" plain><i class="iconfont icon-excel"></i>导出Excel</el-button>
            </div>
            <div class="admin-statistics-content">
                <div class="item e-flex-1">
                    <label>{{way==0?'出库':'销售'}}重量</label>
                    <div class="e-m-t-10"><span class="num">{{ summary.weight }}</span><small>KG</small></div>
                </div>
                <div class="item e-flex-1">
                    <label>{{way==0?'出库':'销售'}}件数</label>
                    <div class="e-m-t-10"><span class="num">{{ summary.quantity }}</span><small>件</small></div>
                </div>
                <div class="item e-flex-1">
                    <label>{{way==0?'出库预估':'销售'}}金额</label>
                    <div class="e-m-t-10"><span class="num">{{ summary.amount }}</span><small>元</small></div>
                </div>
            </div>
            <el-table ref="multipleTable" tooltip-effect="dark" :data="tableData" :span-method="objectSpanMethod" stripe
                border style="width: 100%; margin-top: 20px">
                <el-table-column prop="large" label="类型">
                </el-table-column>
                <el-table-column prop="name" label="可回收物">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="weight" label="出库（销售）总重量(kg)">
                    <template slot-scope="scope">
                        <span>{{ scope.row.weight }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="quantity" label="出库（销售）总数量(件)">
                    <template slot-scope="scope">
                        <span>{{ scope.row.quantity }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="amount" label="出库（销售）总金额(元)">
                    <template slot-scope="scope">
                        <span>{{ scope.row.amount }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="onsiteweight" label="上门回收重量(KG)">
                    <template slot-scope="scope">
                        <span>{{ scope.row.onsiteweight }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="onsitequantity" label="上门回收数量(件)">
                    <template slot-scope="scope">
                        <span>{{ scope.row.onsitequantity }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="onsiteamount" label="上门订单金额(元)">
                    <template slot-scope="scope">
                        <span>{{ scope.row.onsiteamount }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="storeweight" label="门店回收重量(KG)">
                    <template slot-scope="scope">
                        <span>{{ scope.row.storeweight }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="storequantity" label="门店回收数量(件)">
                    <template slot-scope="scope">
                        <span>{{ scope.row.storequantity }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="storeamount" label="门店订单金额(元)">
                    <template slot-scope="scope">
                        <span>{{ scope.row.storeamount }}</span>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
    </div>
</template>

<script>
import timeChangeList from '@/components/form-select-type/timeChangeList.vue'
import storeList from '@/components/form-select-type/storeList.vue'
import franchiseList from '@/components/form-select-type/franchiseList.vue'
export default {
    components: {
        timeChangeList,
        storeList,
        franchiseList
    },
    layout: 'admin',
    data() {
        return {
            way: 0,
            franchiseId: null,
            dataType: 5,
            loading: false,
            tableData: [],
            storeId: [],
            summary: {
                weight: 0,
                quantity: 0,
                amount: 0
            },
            // 时间类型
            timeType: 3, //筛选时间类别：0全部，1今日，2昨日，3本月，4上月，5本季度，6上季度，7本年，9自定义时间段
            startDate: '', //开始时间
            endDate: '', //结束时间
        };
    },
    watch: {
        storeId(val) {
            // console.log('storeId changed:', val, 'type:', typeof val)
            // this.storeId = val
            this.getList()
        },
        dataType(val) {
            console.log(val)
            let type = Number(val)
            switch (type) {
                case 0:
                    this.$router.push({
                        path: '/'
                    })
                    break;
                case 1:
                    this.$router.push({
                        path: '/statistics/inventory'
                    })
                    break;
                case 2:
                    this.$router.push({
                        path: '/statistics/online'
                    })
                    break;
                case 3:
                    this.$router.push({
                        path: '/statistics/store'
                    })
                    break;
                case 4:
                    this.$router.push({
                        path: '/statistics/onlinestorage'
                    })
                    break;
                case 5:
                    this.$router.push({
                        path: '/statistics/storeSell'
                    })
                    break;
            }
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        objectSpanMethod({
            row,
            column,
            rowIndex,
            columnIndex
        }) {
            // console.log(rowIndex, columnIndex,'ssss')
            // console.log(row, 'aaaaa')

            let mergeLength = 1; //需要进行横纵合并的列
            if (columnIndex < mergeLength) {
                let finArray = [1, 1];
                // 处理行数据
                // let cgname = Object.keys(row)[0] //7是数字最后一项类型id
                let cgname = 'large' //合并单元格的主键依据，一般为第一列的值
                if (rowIndex === 0 || row[cgname] !== this.tableData[rowIndex - 1][cgname]) {
                    let rowspan = 1;
                    //计算需要进行合并操作的行
                    for (let i = 0; i < this.tableData.length - 1; i++) {
                        // 只合并连续的
                        if (this.tableData[i][cgname] === row[cgname] && this.tableData[i + 1][cgname] === row[
                            cgname]) {
                            rowspan++;
                        }
                    }
                    finArray[0] = rowspan;
                } else {
                    finArray[0] = 0;
                }
                return finArray
            }
        },
        flattenData(data, level = 0, parentPath = []) {
            let result = [];
            data.forEach(item => {
                const currentPath = [...parentPath, item];
                item.product.forEach(product => {
                    result.push({
                        id: product.id,
                        name: product.name,
                        // isweighing: product.isweighing,
                        weight: product.weight,
                        quantity: product.quantity,
                        amount: product.amount,
                        // onsiteweight: product.onsiteweight,
                        // onsitequantity: product.onsitequantity,
                        // onsiteamount: product.onsiteamount,
                        // storeweight: product.storeweight,
                        // storequantity: product.storequantity,
                        // storeamount: product.storeamount,
                        large: item.name,
                        bigid: item.id,
                        level: level,
                        isCategory: true,
                    });
                })
                // 递归处理子类型
                if (item.type && item.type.length > 0) {
                    // console.log(currentPath)
                    const childData = this.flattenData(item.type, level + 1, currentPath);
                    console.log('递归处理子类型-childData:', childData)
                    childData.forEach((cell) => {
                        result = result.concat([{
                            id: cell.id,
                            name: cell.name,
                            // isweighing: cell.isweighing,
                            weight: cell.weight,
                            quantity: cell.quantity,
                            amount: cell.amount,
                            // onsiteweight: cell.onsiteweight,
                            // onsitequantity: cell.onsitequantity,
                            // onsiteamount: cell.onsiteamount,
                            // storeweight: cell.storeweight,
                            // storequantity: cell.storequantity,
                            // storeamount: cell.storeamount,
                            large: currentPath[0].name,
                            bigid: currentPath[0].id,
                            level: cell.level,
                            isCategory: cell.isCategory,
                        }]);
                    })

                }
            })
            return result;
        },
        getList() {
            this.tableData = []
            let params = {
                timeType: this.timeType,
                startDate: this.startDate,
                endDate: this.endDate,
                way: this.way,
                operatorid: JSON.parse(localStorage.getItem('lifeData')).operatorid,
                // franchiseIds: [this.franchiseId]
            }
            if(this.way == 0){
                if(this.storeId){
                    params.storeIds = this.storeId
                }
            }else{
                if(this.franchiseId){
                    params.franchiseIds = [this.franchiseId]
                }
            }

            this.$axios.post(`/Statistics/StoreSell`, params).then(res => {
                this.tableData = this.flattenData(res.type)
                this.summary.weight = res.weight
                this.summary.quantity = res.quantity
                this.summary.amount = res.amount
                console.log(this.tableData)
                this.loading = false

            })
        },
        downloadwithdrawa() {
            let params = {
                timeType: this.timeType,
                startDate: this.startDate,
                endDate: this.endDate,
                way: this.way,
                operatorid: JSON.parse(localStorage.getItem('lifeData')).operatorid,
                // storeIds: [this.storeId],
                // franchiseIds: [this.franchiseId]
            }
            if(this.way == 0){
                if(this.storeId){
                    params.storeIds = this.storeId
                }
            }else{
                if(this.franchiseId){
                    params.franchiseIds = [this.franchiseId]
                }
            }
            this.$axios.post('/Statistics/StoreSell/Download', params, {
                responseType: 'blob'
            }).then(res => {
                console.log(res)
                let content = res;
                let fileName = '出库销售表.xls'
                this.utils.saveAndExport(content, fileName)
            })
        },
        // 选择时间
        changeTime(e) {
            console.log(e)
            this.startDate = e['startDate']
            this.endDate = e['endDate']
            this.timeType = e['timeType']
            this.getList()
        },
        // 选择站点
        selectStore(value) {
            this.storeId = value,
            this.getList(true)
        },
        // 选择加盟商
        selectFranchise(value){
            this.franchiseId = value,
            this.getList(true)
        }
    }
}
</script>

<style lang="scss" scoped>
.admin-statistics-content {
    display: flex;
    background-color: #fff;
    padding: 15px;
    height: calc(100% - 30px);
    border: 1px solid var(--light);

    .item {
        &+.item {
            border-left: 1px solid var(--light);
            padding-left: 30px;
        }

        .icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--light);
            background-color: #f2f3f5;
            padding: 5px;
            margin: 0 20px 0 0;
            box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
        }

        label {
            color: var(--grey);
            font-size: 12px;
            margin-bottom: 5px;
            display: block;
        }

        .num {
            font-size: 30px;
        }
    }
}
</style>